<template>
    <div class="goods-list">
        <ul class="goods-item-wraper">
            <li   class="goods-item" v-for="(item, i) in goodsList" :key="i" @click = "GoodsInfo(item.id)" >
                <!--{{i}}-->
                <img :src="item.img_url" alt="">
                <div class="description">{{item.title}}</div>
                <div class="text">
                    <p class="price">
                        <span class="now">￥{{item.sell_price}}</span>
                        <span class="old">￥{{item.market_price}}</span>
                    </p>
                    <p class="cc">
                        <span>热卖中</span>
                        <span>剩60件</span>
                    </p>
                </div>
            </li>
        </ul>
        <mt-button type="danger" size="large" @click="getMore()">加载更多</mt-button>
    </div>
</template>

<script type="text/ecmascript-6">
    export default {
        data(){
            return {
                number : 1,
                goodsList:[],
                id:''

            }
        },
        created(){
            this.getGoodsList()
        },
        methods:{
            getGoodsList(){
                this.$http.get("api/getgoods?pageindex=" + this.number).then(res => {
                    if(res.body.status === 0) {
                        res = res.body.message
                        // this.goodslist = res.body.message
                        this.goodsList = this.goodsList.concat(res)
                        // console.log(this.goodsList)
                    }
                })
            },
            getMore(){
                this.number++;
                this.getGoodsList()
            },
            GoodsInfo(id){
                // console.log(id)
                this.$router.push({path:'/home/goodsInfo/'+id})
            }
        }
    };

</script>

<style lang="stylus" rel="stylesheet/stylus">
    .goods-list
        padding-bottom 50px
        .goods-item-wraper
            list-style none
            padding 0
            margin 0

            display flex
            flex-wrap: wrap;
            justify-content space-between
            /*text-align center*/
            .goods-item
                width 47%
                margin 5px
                border 1px solid #ccc
                box-shadow: 0 0 8px #ccc
                padding 1px
                img
                    width 100%
                .description
                    font-size 14px
                .text
                    padding-top 10px
                    background-color #eee
                    p.price
                        font-size 16px
                        .now
                            color red
                        .old
                            font-weight normal
                            font-size 10px
                            padding-left 6px
                            text-decoration line-through

                    p.cc
                        display flex
                        justify-content space-between
                        font-size 10px
                        padding-bottom 5px
                        margin 0
                        font-weight normal
            p
                color: #8f8f94
</style>